<template>
	<div class="geshou">
		<section style="padding: 0 10px;margin-top: 10px;">
				<van-nav-bar
				  left-text="推荐分类"
				  @click-left=""
				  @click-right="onClickRight"
				><van-icon name="arrow" slot="right" />
				</van-nav-bar>
			<ul class="classify_nav" >
				<router-link to="/relaxed" tag="li">放松</router-link>
				<router-link to="#" tag="li">放松</router-link>
				<router-link to="#" tag="li">放松</router-link>
				<router-link to="#" tag="li">放松</router-link>
				<router-link to="#" tag="li">放松</router-link>
				<router-link to="#" tag="li">放松</router-link>
			</ul>
			
			<h5>生活模式</h5>
			
			<ul class="classify_set">
					<router-link to="#" tag="li">
						<img src="../../build/logo.png"/>
						<p>励志英文歌</p>
					</router-link>
					<router-link to="#" tag="li">
						<img src="../../build/logo.png"/>
						<p>女生说唱</p>
					</router-link>
					<router-link to="#" tag="li">
						<img src="../../build/logo.png"/>
						<p>励志英文歌</p>
					</router-link>
					<router-link to="#" tag="li">
						<img src="../../build/logo.png"/>
						<p>励志英文歌</p>
					</router-link>
			</ul>
			<h5>生活模式</h5>
			
			<ul class="classify_set">
					<router-link to="#" tag="li">
						<img src="../../build/logo.png"/>
						<p>励志英文歌</p>
					</router-link>
					<router-link to="#" tag="li">
						<img src="../../build/logo.png"/>
						<p>女生说唱</p>
					</router-link>
					<router-link to="#" tag="li">
						<img src="../../build/logo.png"/>
						<p>励志英文歌</p>
					</router-link>
					<router-link to="#" tag="li">
						<img src="../../build/logo.png"/>
						<p>励志英文歌</p>
					</router-link>
			</ul>
		</section>
	</div>
</template>

<script>
	import { NavBar ,Actionsheet,Toast,Icon} from 'vant';
	export default{
		name:'Classify',
		components:{
			[NavBar.name]:NavBar,
			[Actionsheet.name]:Actionsheet,
			[Toast.name]:Toast,
			[Icon.name]:Icon
		},
		data(){
			return{
				
			}
		}
	}
</script>

<style>
	.classify_nav{
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}
	.classify_nav>li{
		width: 100px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		background: #CECECE;
		color: #A8A8A8;
		font-size: 14px;
		margin-bottom: 10px;
	}
	.classify_set{
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		margin-bottom: 40px;
	}
	.classify_set>li{
		margin-bottom: 10px;
	}
	.classify_set li>img{
		width: 155px;
		height: 125px;
	}
</style>